<!DOCTYPE html>
    <html lang="en">
        <head>
        <meta charset="UTF-8"  name="viewport" content="width=device-width,initial-scale=1.0" />
        <title>成都骡马市站基坑监测平台</title>
        <!-- 引入SheetJS和Highcharts库 -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.1/xlsx.full.min.js"></script>
        <script src="https://code.highcharts.com/highcharts.js"></script>
        <script src="https://code.highcharts.com/modules/exporting.js"></script>
        <script src="https://code.highcharts.com/modules/export-data.js"></script>
        <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
  
        <link rel="stylesheet" href="https://cloud.dev.pkpm.cn/bimviewer/viewer/v5/obv.css" type="text/css" />
        <link rel="resource" type="application/l10n" href="https://cloud.dev.pkpm.cn/bimviewer/viewer/v5/locale/locale.properties">
        <script src="https://cloud.dev.pkpm.cn/bimviewer/viewer/v5/obv.js"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.5.5/dist/css/uikit.min.css" />
        <script src="https://lib.baomitu.com/echarts/4.7.0/echarts-en.min.js"></script>
        <style>
            @media (max-width: 760px) {
              .my-obv-domContainer {
                top: 110px !important;
                right: 0 !important;
                /*display: block !important;*/
              }
              .my-obv-domContainer button {
                font-size: 12px;
                padding: 0 10px;
              }
            }
            html, body {
              width: 100%;
              height: 100%;
              margin: 0px;
              padding: 0px;
              background: #3c3f41;
            }
            .my-obv-viewer {
              position: relative;
              width: 100%;
              height: 100%;
              display: inline-block;
            }
            .my-obv-domContainer {
              position: absolute;
              z-index: 99;
              top: 160px;
              right: 8px;
              display: flex;
              flex-wrap: wrap-reverse;
              flex-direction: column;
            }
            .my-obv-domContainer button {
              border-radius: 30px;
              margin-top: 20px;
              margin-right: 20px;
              float: right;
            }
            
        </style>
        </head>
        <body>
            <input type="file" id="input-file" onchange="loadFile()">   
            <div id="viewer" class="my-obv-viewer">
            <div id="chart-container" class="my-chart-container"></div>
        </div>
            <div id="domContainer" class="my-obv-domContainer">
            <button id="addMarkerComponentOne" class="uk-button uk-button-primary">显示监测点位</button>
            <button id="clearMarkerComponentOne" class="uk-button uk-button-primary">移除监测点位</button>
        </div>
        </script>
            
            <script type="module">
                $(document).ready(function() {
            console.log("jQuery已成功引入！");
            });
                            
            let markerAddin;
            
async function main() {
    const applicationOptions = {
        getAccessToken: getAccessToken,
        refreshAccessToken: getAccessToken,
        serviceConfig: {
            origin: 'https://api.cloud.pkpm.cn',
            apiContextPath: '/bimserver/viewing/v3',
        },
    };
    const viewer3dConfig = {
        addinConfigs: [
            {
                id: 'OBVAddins.Marker',
                noButton: false,
            },
        ],
    };
    let urn = 'urn:bimbox.object:1NnyKhLmCpG/luomashi_test_biaozhu_p3d';
    // let urn = 'urn:bimbox.object:viewing_bucket/rvt-model';
    // 实例化 Builder，用于模型加载
    const builder = new OBV.Api.ObvBuilder();
    // 创建 Application 对象
    const application = await builder.buildApplication(applicationOptions);
    console.log(application);
    // 创建 document 管理视图，加载完成后可以调用接口
    const obvDocument = await builder.loadDocument(application, urn);
    console.log("1211！");
    // 创建 viewer 容器, 创建API
    const obvApi = await builder.buildViewer3d(application, document.getElementById('viewer'), viewer3dConfig);
    // 获取三维模型视图
    console.log("1311！");
    const viewer3dItems = obvDocument.get3dGeometryItems();
    // 加载模型
    builder.load3dModels(obvApi, {
        obvDocument: obvDocument,
        viewer3dItem: viewer3dItems[0],
    });
    console.log("11411！");
    // 聚焦到模型
    obvApi.addEventListener(OBV.ViewerEventTypes.V3dGeometryLoadedEvent, () => {
        obvApi.fitToView();
    });
    var onclick_num = 0;
    
    document.getElementById('addMarkerComponentOne').onclick = function() {
        onclick_num ++;
        console.log(onclick_num);
        
        
        // 创建一个图表容器
        // if (!document.getElementById('my-chart-container')) {
        if (!document.getElementById('chart-container')) {
            console.log('122')
            const myChartDomCon = document.createElement('div');
            // myChartDomCon.setAttribute('id', 'my-chart-container');
            myChartDomCon.setAttribute('id', 'chart-container');
            const myChartDom = document.createElement('div');
            myChartDomCon.appendChild(myChartDom);
            // myChartDom.id = `chart${onclick_num}`;
            myChartDom.id = 'chart';
            myChartDom.style.width = '200px';
            myChartDom.style.height = '200px';
            document.getElementById('viewer').appendChild(myChartDomCon);
        }
        if (document.getElementById('chart-container')) {
            console.log('have chart-container')
            
        }


        // 获取插件
        const addinManager = obvApi.getAddinManager();
        markerAddin = addinManager.getAddin(viewer3dConfig.addinConfigs[0].id);
        console.log('viewer3dConfig.addinConfigs[0].id:',viewer3dConfig.addinConfigs[0].id)
        if (!markerAddin) {
            // 插件没有加载过，需要加载到平台中
            addinManager.loadAddin(viewer3dConfig.addinConfigs[0].id);
            markerAddin = addinManager.getAddin(viewer3dConfig.addinConfigs[0].id);
        }

        markerAddin.addEventListener(OBVAddins.Marker.MarkerEventTypes.MARKER_SELECTED, (annotation) => {
            console.log('Marker Selected: ', annotation);
        });

        markerAddin.addEventListener(OBVAddins.Marker.MarkerEventTypes.ANCHOR_CLICKED, (annotation) => {
            console.log('Marker Anchor Clicked: ', annotation);
        });

        markerAddin.addEventListener(OBVAddins.Marker.MarkerEventTypes.ANCHOR_DOUBLE_CLICKED, (annotation) => {
            console.log('Marker Anchor Double Clicked: ', annotation);
        });

        markerAddin.addEventListener(OBVAddins.Marker.MarkerEventTypes.ANNOTATION_CLICKED, (annotation) => {
            console.log('Marker Annotation Clicked: ', annotation);
        });

        markerAddin.addEventListener(OBVAddins.Marker.MarkerEventTypes.ANNOTATION_DOUBLE_CLICKED, (annotation) => {
            console.log('Marker Annotation Double Clicked: ', annotation);
        });

        // obvApi.addEventListener(OBV.ViewerEventTypes.V3dCameraChangeEvent,caculateOpacity);
        markerAddin.addEventListener(OBVAddins.Marker.MarkerEventTypes.MARKER_UPDATED, (annotation) => {
            console.log('Marker Updated: ', annotation);
        });

        markerAddin.addEventListener(OBVAddins.Marker.MarkerEventTypes.MARKER_CREATED, (annotation) => {
            console.log('Marker created: ', annotation);
        });

        // markerAddin.addEventListener(OBVAddins.Marker.MarkerEventTypes.VIEWER_CLICKED, (annotation) => {
        //     console.log('viewer_clicked: ', annotation);
        // });


        // 获取参数,可以增加观测点位，包括构件ID与位置
        const componentOneNodeId = [{ dbId: 504, modelId: 1 }];
        // const componentOneNodeId = 639;
        const bbox = obvApi.getObjectsBounds(componentOneNodeId);
        // const tag = document.getElementById('componentOneMarkerTag').value;
        // 获取div'chart-container'的内部所有信息
        const message = document.getElementById('chart-container').innerHTML;
        // console.log(document.getElementById('chart-container').innerHTML)
        const externalId = 639;
        const offsetX = 20;
        const offsetY = 20;
        const customizedStyles = {
            annotationBackgroundColor: 'rgba(1, 1, 1, 0.8)',
        };
        markerAddin.createTextSymbolMarker(
            bbox.center(new THREE.Vector3()),
            'i',
            message,
            message,
            externalId,
            offsetX,
            offsetY,
            customizedStyles,
        );

        // 这里div才创建完成
        // 获取具有指定class的所有div元素
        // var elements = document.getElementsByClassName("marker-annotation");

        // // 循环遍历每个div元素并修改id
        // for (var i = 0; i < elements.length; i++) {
        // var element = elements[i];
        // // 修改id
        // element.id = "新的id";
        // }
        // 查找具有指定class的div元素并筛选出具有指定id的元素
        // var new_element = $("div.marker-annotation#1").attr("id", "12345");
        var element = $(`div.marker-annotation#${onclick_num}`);//获取id=1 class=marker-annotation的div信息
        var chlid_div = element[0].getElementsByTagName("div")[1];
        chlid_div.id = `chart${onclick_num}`
        // var child = element.getElementsByTagName("div");

        console.log('div.marker-annotation#1 的information',element[0].getElementsByTagName("div")[1]);
        console.log('div改id后',chlid_div);
        // 获取指定class下的所有元素
       
        
        // 选中模型中得对应构件
        obvApi.select(componentOneNodeId);
        const myChart = echarts.init(document.getElementById(`chart${onclick_num}`));
                // 指定图表的配置项和数据
                const option = {
                    tooltip: {
                        formatter: '{a} <br/>{b} : {c}%',
                    },
                    series: [
                        {
                            name: '设备运行指标',
                            type: 'gauge',
                            radius: '75%',
                            title: {
                                show: false,
                            },
                            axisLine: {
                                lineStyle: {
                                    width: 20,
                                },
                            },
                            detail: {
                                formatter: '{value}%',
                                textStyle: {
                                    fontSize: 12,
                                },
                            },
                            data: [{ value: 50, name: '完成率' }],
                        },
                    ],
                };
                myChart.setOption(option, true);
                setInterval(() => {
                    option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
                    myChart.setOption(option, true);
                }, 2000);
        // make_chat(onclick_num);
        // function make_chat(onclick_num){
        //     if(onclick_num==1){
        //         const myChart = echarts.init(document.getElementById('chart'));
        //         // 指定图表的配置项和数据
        //         const option = {
        //             tooltip: {
        //                 formatter: '{a} <br/>{b} : {c}%',
        //             },
        //             series: [
        //                 {
        //                     name: '设备运行指标',
        //                     type: 'gauge',
        //                     radius: '75%',
        //                     title: {
        //                         show: false,
        //                     },
        //                     axisLine: {
        //                         lineStyle: {
        //                             width: 20,
        //                         },
        //                     },
        //                     detail: {
        //                         formatter: '{value}%',
        //                         textStyle: {
        //                             fontSize: 12,
        //                         },
        //                     },
        //                     data: [{ value: 50, name: '完成率' }],
        //                 },
        //             ],
        //         };
        //         myChart.setOption(option, true);
        //         setInterval(() => {
        //             option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
        //             myChart.setOption(option, true);
        //         }, 2000);

            // }
            // if(onclick_num==2){
            //     const myChart2 = echarts.init(document.getElementById('chart2'));
            //     // 指定图表的配置项和数据
            //     const option = {
            //         tooltip: {
            //             formatter: '{a} <br/>{b} : {c}%',
            //         },
            //         series: [
            //             {
            //                 name: '设备运行指标',
            //                 type: 'gauge',
            //                 radius: '75%',
            //                 title: {
            //                     show: false,
            //                 },
            //                 axisLine: {
            //                     lineStyle: {
            //                         width: 20,
            //                     },
            //                 },
            //                 detail: {
            //                     formatter: '{value}%',
            //                     textStyle: {
            //                         fontSize: 12,
            //                     },
            //                 },
            //                 data: [{ value: 50, name: '完成率' }],
            //             },
            //         ],
            //     };
            //     myChart2.setOption(option, true);
            //     setInterval(() => {
            //         option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
            //         myChart2.setOption(option, true);
            //     }, 2000);

            // }
            
        // }
    };
    };

    document.getElementById('clearMarkerComponentOne').onclick = function() {
        markerAddin.clearMarkers();
        // 选中模型中得对应构件
        obvApi.clearSelection();
    };


main();

// 访问的令牌 getAccessToken 和 令牌有效期 expiresIn 
function getAccessToken(callBack) {
    callBack('eyJhbGciOiJSUzI1NiJ9.eyJzY29wZSI6WyJvYnY6cmVhZCJdLCJleHAiOjE3Mzk1NTk0MDAsImNsaWVudF9pZCI6IjQwZGVwSjRJRHByTDNLTU9SdzRINlhuNSIsImp0aSI6Ijc1YzZmODUwLWVkNTctNDc3Yy04NTVjLWI1NTEzMDk5YzJmNSJ9.U0s-A99lMYTZsarzOYY5zIDrSMF3tHZNjcyUCjh6ykwZ9kfjFIxXSJEFwqxbdCrNaKHBseRnA5DgR8MmEYKDLDLwWthJroX_glxKHXV1jKgJ7u2DI22yTsZVuSqwkEXRWfS_Ffiqm76InEmckE-P6ED3cmhKXfy6s0omIk1royk3XpY-SHr1Ti4OO445ZsWuAZFsEFUISZU5ArUoazDJ_UzAAkGorcpOljpdzZKSjRO62qJKUS6lqwhj6iiHpgh_aZ9raha0ZIR1CW_bIIpon5McKRjB-PgaHMGDJKeZcLYqQ7uQlyk-C1-VyTyTZUBIOX8R0zLfs2NBogMjB9v4Iw', 360000)
}

            </script>
        </body>
    </html>
